<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <script>
    var ctx = '${ pageContext.request.contextPath}';
    console.log("ctx:"+ctx)
     let userid = '${ sessionScope.user.id}'
     if(!userid){
         location.href = ctx + '/login.jsp'
     }
</script>
<script>
    $(function (){
        (function() {
            // 创建样式
            const style = document.createElement('style');
            style.textContent = `
    .ai-assistant-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .ai-assistant-button {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .ai-assistant-button:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
    }

    .ai-assistant-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .ai-assistant-button:active::before {
        width: 300px;
        height: 300px;
    }

    .ai-assistant-icon {
        width: 30px;
        height: 30px;
        fill: white;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

    .ai-assistant-panel {
        position: absolute;
        bottom: 80px;
        right: 0;
        width: min(90vw, 800px);
        height: min(85vh, 900px);
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transform: translateY(20px) scale(0.9);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        overflow: hidden;
    }

    .ai-assistant-panel.active {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: all;
    }

    .ai-assistant-content {
        height: 100%;
        position: relative;
    }

    .ai-assistant-iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

    .ai-assistant-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
    }

    .ai-assistant-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(102, 126, 234, 0.3);
        border-top-color: #667eea;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* 科技感装饰元素 */
    .ai-assistant-decoration {
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
    }

    .ai-assistant-decoration::before,
    .ai-assistant-decoration::after {
        content: '';
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
        animation: float 6s ease-in-out infinite;
    }

    .ai-assistant-decoration::before {
        top: -100px;
        left: -100px;
        animation-delay: 0s;
    }

    .ai-assistant-decoration::after {
        bottom: -100px;
        right: -100px;
        animation-delay: 3s;
    }

    @keyframes float {
        0%, 100% { transform: translate(0, 0) scale(1); }
        33% { transform: translate(30px, -30px) scale(1.1); }
        66% { transform: translate(-20px, 20px) scale(0.9); }
    }
`;
            document.head.appendChild(style);

            // 创建HTML结构
            const container = document.createElement('div');
            container.className = 'ai-assistant-container';
            container.innerHTML = `
    <button class="ai-assistant-button" id="aiAssistantBtn">
        <svg class="ai-assistant-icon" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
        </svg>
    </button>
    <div class="ai-assistant-panel" id="aiAssistantPanel">
        <div class="ai-assistant-decoration"></div>
        <div class="ai-assistant-content">
            <div class="ai-assistant-loading" id="aiAssistantLoading">
                <div class="ai-assistant-spinner"></div>
            </div>
            <!-- 在这里放置你的iframe -->
            <iframe class="ai-assistant-iframe" id="aiAssistantIframe"
                    src="">
            </iframe>
        </div>
    </div>
`;
            document.body.appendChild(container);

            // 获取元素
            const btn = document.getElementById('aiAssistantBtn');
            const panel = document.getElementById('aiAssistantPanel');
            const iframe = document.getElementById('aiAssistantIframe');
            const loading = document.getElementById('aiAssistantLoading');

            // 设置iframe的src（请在这里替换为你的AI页面URL）
            const aiPageUrl = ctx + "/ai"; // 修改为你的AI页面路径
            let isOpen = false;
            let isInitUrl = false;

            // 点击按钮显示/隐藏面板
            btn.addEventListener('click', function() {
                if (!isOpen) {
                    panel.classList.add('active');
                    isOpen = true;
                    if (!isInitUrl) {
                        isInitUrl = true;//仅打开一次即可
                        loading.style.display = 'block';
                        iframe.src = aiPageUrl;
                        iframe.onload = function() {
                            loading.style.display = 'none';
                        };
                    }
                } else {
                    panel.classList.remove('active');
                    isOpen = false;
                }
            });

            // 点击面板外部关闭
            document.addEventListener('click', function(e) {
                if (isOpen && !container.contains(e.target)) {
                    panel.classList.remove('active');
                    isOpen = false;
                }
            });

            // ESC键关闭
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && isOpen) {
                    panel.classList.remove('active');
                    isOpen = false;
                }
            });

            // 添加窗口大小调整时的响应
            window.addEventListener('resize', function() {
                if (isOpen) {
                    // 确保面板在调整窗口大小时仍然可见
                    const rect = panel.getBoundingClientRect();
                    if (rect.right > window.innerWidth) {
                        panel.style.right = '20px';
                    }
                    if (rect.bottom > window.innerHeight) {
                        panel.style.bottom = '80px';
                    }
                }
            });
        })();
    })
</script>
<!--头部信息-->
<header class="lyear-layout-header">

    <nav class="navbar navbar-default">
        <div class="topbar">

            <div class="topbar-left">
                <div class="lyear-aside-toggler">
                    <span class="lyear-toggler-bar"></span>
                    <span class="lyear-toggler-bar"></span>
                    <span class="lyear-toggler-bar"></span>
                </div>
<%--                <span class="navbar-page-title"> 表格 </span>--%>
            </div>

            <ul class="topbar-right">
                <li class="dropdown dropdown-profile">
                    <a href="javascript:void(0)" data-toggle="dropdown">
                        <c:if test="${ sessionScope.user.avatar !=null && sessionScope.user.avatar!=''}">　
                            <img class="img-avatar img-avatar-48 m-r-10" style="border: 2px solid #e1e1e1"
                                 src="${ pageContext.request.contextPath}/file?filename=${ sessionScope.user.avatar}" alt="头像">
                        </c:if>
                        <span>${ sessionScope.user.rolech} : ${ sessionScope.user.username} <span class="caret"></span></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li> <a href="${ pageContext.request.contextPath}/${ sessionScope.user.role}/edit?id=${ sessionScope.user.id}"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                        <li class="divider"></li>
                        <li> <a href="${ pageContext.request.contextPath}/logout"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                    </ul>
                </li>

            </ul>

        </div>
    </nav>

</header>
<!--End 头部信息-->

